<template>
  <div class="bg">
    <div class="list" :class="'list_' + ($index)" v-for="pageList in pageLists"
    @touchstart="touchstartBtn($event, $index)" @touchmove="touchmoveBtn($event, $index)"
    @touchend="touchendBtn($event, $index)" @click="suer($event, $index)">
      <div class="list-title">
        <div class="title-img"><img src="../images/icon_mine_blue.png" alt="" /></div>
        <div class="title-ct">
          <span>{{ pageList.contact }}</span>
          <span class="number">{{ pageList.contactPhone }}</span>
          <div class="title-font">
            {{ pageList.province }}{{ pageList.city }}{{ pageList.area }}
            {{ pageList.street }}{{ pageList.address }}
          </div>
        </div>
      </div>
      <div class="lst-ct">
        <div class="lstimg">
          <span class="ct-img" :class="{'sureImg': pageList.isDefault === '1'}" v-show="removeSuer"></span>
        </div>
        <div class="editBtn" v-link="'/buy-newAddress?id=' + pageList.id">
          编辑
        </div>
      </div>
      <div class="btn" @click="delAddress(pageList.id)">删除</div>
    </div>
  </div>

  <div class="address" @click="newAddress">
    <div class="address-bt">
      <button type="button"><span>增加新收货地址</span></button>
    </div>
  </div>
  <toast v-show="loading" :type="'loading'">加载中</toast>
  <dialog v-show="dialog" :title="'错误提示'" :type="" @weui-dialog-confirm="dialog=false">
    <p>加载失败，请重试</p>
  </dialog>
</template>
<script>
  import {Toast, Dialog} from "vue-weui";
  import {AJAX} from "../methods/query.js";
  export default {
    data() {
      return {
        loading: false,
        dialog: false,
        removeSuer: true,
        pageSize: 0,
        pageLists: [],
        startPoint: [],
        clientX: []
      };
    },
    methods: {
      async suer(e, i) {
        if (!e.target.classList.contains('editBtn')) {
          await AJAX.updataSend({
            openid: this.$root.openId,
            id: this.pageLists[i].id,
            contact: this.pageLists[i].contact,
            contactPhone: this.pageLists[i].contactPhone,
            Province: this.pageLists[i].province,
            city: this.pageLists[i].city,
            area: this.pageLists[i].area,
            street: this.pageLists[i].street,
            address: this.pageLists[i].address,
            zipCode: this.pageLists[i].zipCode,
            isDefault: "1"
          });
          let $ele = document.querySelectorAll('.list');
          for (let k = 0; k < $ele.length; k++) {
            $ele[k].querySelector('.ct-img').classList.remove('sureImg');
          }
          // let $event = e.target;
          $ele[i].querySelector('.ct-img').classList.add('sureImg');
          console.info(this.$route.query.back);
          if (this.$route.query.back === '1') {
            history.go(-1);
          }
        }
      },
      touchstartBtn (e, index) {
        if (!this.startPoint[index]) {
          this.startPoint[index] = e.touches[0].clientX;
        }
      },
      touchmoveBtn (e, index) {
        let clientX = -(this.startPoint[index] - e.touches[0].clientX);
        if (clientX < -80) {
          clientX = -80;
        } else if (clientX > 0) {
          clientX = 0;
        }
        this.clientX[index] = clientX;
        document.querySelector('.list_' + index).style.WebkitTransform = "translateX(" + clientX + "px)";
      },
      touchendBtn (e, index) {
        if (this.clientX[index] < -30) {
          document.querySelector('.list_' + index).style.WebkitTransform = "translateX(-80px)";
        } else {
          document.querySelector('.list_' + index).style.WebkitTransform = "translateX(0)";
        }
      },
      async delAddress (id) {
        await AJAX.delSend(id);
        location.reload();
      },
      newAddress () {
        console.log("kan:" + this.pageLists.length);
        if (this.pageLists.length < 3) {
          this.$route.router.go('/buy-newAddress');
        } else {
          alert("收货地址数量达到上限!");
        }
      }
    },
    async ready() {
      let inquireRecord = await AJAX.inquireRecord(this.$root.openId);
      this.pageLists = inquireRecord;
    },
    components: {
      Toast,
      Dialog
    }
  };
</script>
<style scoped lang="less">
  .bg{
    padding-bottom: 3rem;
    overflow: hidden;
  }
  .list{
    font-size: .6rem;
    margin-top: .3rem;
    color:#3F3F3F;
    background-color: #fff;
    position: relative;
    transform: translateX(0px);
    height:5rem;
    .btn{
      position: absolute;
      top: 0;
      right: -80px;
      padding:2rem 0;
      text-align: center;
      background: #e4393c;
      color: #fff;
      width: 80px;
      height: 5rem;
    }
    .list-title{
      float: left;
      width:88%;
      line-height: 1rem;
      padding:.5rem 0 .5rem .3rem;
      position: relative;
      .title-img{
        float: left;
        width:10%;
      }
      .title-ct{
        float:left;
        width:90%;
        .number{
          text-align: right;
          position: absolute;
          right: .5rem;
        }
      }
      .title-font{
        clear: both;
        height: 3em;
        overflow: hidden;
      }
      img{
        width:1rem;
        height:1rem;
        vertical-align:middle;
      }
    }

    .lst-ct{
      width: 12%;
      float: left;
      text-align: center;
      span{
        margin-top: 1.3rem;
        display: inline-block;
        width:1.2rem;
        height:1.2rem;
      }
    }
    .editBtn {
      position: absolute;
      bottom: .4rem;
      right: .4rem;
      padding: 0 8px;
      border-radius: 3px;
      border: 1px solid #999;
    }
  }

  .sureImg{
    background-image: url(../images/icon_yes_active.png);
    background-size: 100% auto;
    &.active{
      background-image: url(../images/icon_yes_active.png);
    }
  }

  .address{
    position: fixed;
    bottom: 0;
    width:100%;
    height:3rem;
    background-color: #fff;
    .address-bt button{
      position: fixed;
      bottom: 0;
      padding: .5rem 0;
      width:90%;
      margin-left:5%;
      margin-bottom: .5rem;
      border-radius: .3rem;
      background-color: #15A1D6;
      text-align: center;
      color:#fff;
    }
  }
</style>
